<template>
  <div class="container Cropper">
    <el-row :gutter="30">
      <el-col :span="12" style="overflow: hidden">
        <img style="max-width: 100%" ref="image" :src="imgUrl">
      </el-col>
      <el-col :span="12">
        <div style="width: 600px;height: 300px;overflow: hidden;" id="previewImg"></div>
        <el-button type="primary" style="margin-top: 20px" @click="crop()">裁剪</el-button>
      </el-col>
    </el-row>
    <el-row style="margin-top: 15px">
      <el-col :span="12">
        <el-card class="box-card">
          <div class="flex-start">
            <el-button @click="cropper.zoom(0.1)">大</el-button>
            <el-button @click="cropper.zoom(-0.1)">小</el-button>
            <el-button @click="cropper.move(10, 0)">左</el-button>
            <el-button @click="cropper.move(-10, 0)">右</el-button>
            <el-button @click="cropper.move(0, 10)">上</el-button>
            <el-button @click="cropper.move(0, -10)">下</el-button>
            <el-button @click="cropper.rotate(-45)">左旋转</el-button>
            <el-button @click="cropper.rotate(45)">右旋转</el-button>
            <el-button @click="cropper.scaleX(-1)">X翻转</el-button>
            <el-button @click="cropper.scaleX(1)">X翻转</el-button>
            <el-button @click="cropper.scaleY(-1)">Y翻转</el-button>
            <el-button @click="cropper.scaleY(1)">Y翻转</el-button>
            <el-button @click="cropper.crop()">✔</el-button>
            <el-button @click="cropper.clear()">×</el-button>
            <el-button @click="cropper.disable()">锁定</el-button>
            <el-button @click="cropper.enable()">解锁</el-button>
            <el-button @click="cropper.reset()">Reset</el-button>
            <el-button @click="cropper.destroy()">Destroy</el-button>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <el-checkbox v-model="toggleOptions.responsive">responsive</el-checkbox>
          <el-checkbox v-model="toggleOptions.restore">restore</el-checkbox>
          <el-checkbox v-model="toggleOptions.checkCrossOrigin">checkCrossOrigin</el-checkbox>
          <el-checkbox v-model="toggleOptions.checkOrientation">checkOrientation</el-checkbox>
          <el-checkbox v-model="toggleOptions.modal">modal</el-checkbox>
          <el-checkbox v-model="toggleOptions.guides">guides</el-checkbox>
          <el-checkbox v-model="toggleOptions.center">center</el-checkbox>
          <el-checkbox v-model="toggleOptions.highlight">highlight</el-checkbox>
          <el-checkbox v-model="toggleOptions.background">background</el-checkbox>
          <el-checkbox v-model="toggleOptions.autoCrop">autoCrop</el-checkbox>
          <el-checkbox v-model="toggleOptions.movable">movable</el-checkbox>
          <el-checkbox v-model="toggleOptions.rotatable">rotatable</el-checkbox>
          <el-checkbox v-model="toggleOptions.scalable">scalable</el-checkbox>
          <el-checkbox v-model="toggleOptions.zoomable">zoomable</el-checkbox>
          <el-checkbox v-model="toggleOptions.zoomOnTouch">zoomOnTouch</el-checkbox>
          <el-checkbox v-model="toggleOptions.zoomOnWheel">zoomOnWheel</el-checkbox>
          <el-checkbox v-model="toggleOptions.cropBoxMovable">cropBoxMovable</el-checkbox>
          <el-checkbox v-model="toggleOptions.cropBoxResizable">cropBoxResizable</el-checkbox>
          <el-checkbox v-model="toggleOptions.toggleDragModeOnDblclick">toggleDragModeOnDblclick</el-checkbox>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.css'
import http from '../http/index'
export default {
  props: {
    imgUrl: {
      type: String,
      default: require('../assets/images/bg.jpg')
    },
    aspectRatio: Number
  },
  data () {
    return {
      toggleOptions: {
        responsive: true,
        restore: true,
        checkCrossOrigin: true,
        checkOrientation: true,
        modal: true,
        guides: true,
        center: true,
        highlight: true,
        background: true,
        autoCrop: true,
        movable: true,
        rotatable: true,
        scalable: true,
        zoomable: true,
        zoomOnTouch: true,
        zoomOnWheel: true,
        cropBoxMovable: true,
        cropBoxResizable: true,
        toggleDragModeOnDblclick: true
      }
    }
  },
  mounted () {
    setTimeout(() => {
      this.init()
    }, 50)
  },
  methods: {
    init () {
      const image = this.$refs.image
      this.cropper = new Cropper(image, {
        preview: '#previewImg',
        checkCrossOrigin: true,
        aspectRatio: this.aspectRatio,
        ...this.toggleOptions
      })
    },
    crop () {
      this.cropper.getCroppedCanvas().toBlob(blob => {
        let formData = new FormData()
        formData.append('img', blob)
        let loading = this.$loading({ target: '.Cropper' })
        http.post('/api/image', formData).then(async res => {
          if (res) {
            loading.close()
            this.$emit('crop', res.obj.url)
          }
        })
      })
    }
  },
  watch: {
    toggleOptions: {
      deep: true,
      handler: function () {
        this.cropper.destroy()
        this.init()
      }
    },
    imgUrl () {
      setTimeout(() => {
        this.cropper.destroy()
        this.init()
      }, 50)
    }
  }
}
</script>

<style lang="less" scoped>
.flex-start {
  flex-wrap: wrap;
  padding-top: 10px;
  .el-button {
    margin-bottom: 10px;
  }
}
</style>
